<template>
    <el-container>
      <el-header>
      <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal"
  @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
         <el-menu-item index="index" ><i class="el-icon-s-home"></i><span>首页</span></el-menu-item>
         <el-menu-item index="carrental" ><i class="el-icon-truck"></i><span>汽车租赁</span></el-menu-item>
         <el-menu-item index="order" ><i class="el-icon-s-order"></i><span>订单管理</span></el-menu-item>
         <!--登陆后用个人中心代替登录-->        
          <el-menu-item v-if="userPhone" index="personal">
              <el-button type="text"  icon="el-icon-user" class="btn" >个人中心</el-button><!--更改css样式，新加class="btn"-->
          </el-menu-item>                                                              
         <template v-else>
           <el-menu-item ><el-button type="text" @click="goBack" icon="el-icon-user" class="btn">登录</el-button></el-menu-item>
         </template>   
         <!--登录后用退出代替-->    
        <el-menu-item v-if="userPhone">
              <el-button type="text" class="btn" @click="loginOut()">退出</el-button> 
           </el-menu-item>    
         <template v-else>
           <el-menu-item ></el-menu-item>
        </template>
         
      </el-menu>
      </el-header>
    </el-container>
</template>

<script>
export default {
  data(){
    return{
      
    }
  },
  computed: {
    userPhone: function(){
      return sessionStorage.getItem('userPhone')
    }
  },
  methods:{
    goBack(){
      sessionStorage.removeItem("userPhone");
      this.$router.push('/login');//到登录页
    },
    loginOut(){
      sessionStorage.clear();//清除缓存
      this.$router.push('/index');
      window.location.reload();//刷新
    },
  }
}
</script>

<style>
.btn{
  color:aliceblue;
}

.el-button:hover{
  color:aliceblue;
}
.el-header{
  width:100%;
}

.el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
</style>
